<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { getGradeListApi } from '../../api';
interface Igrade {
	id: number,
	code: string,
	name: string,
	status: number
}
const app = getApp()
const list = ref<Igrade[]>([])
const top = ref<number>(0)
const props = defineProps({
	show:{
		type: Boolean,
		default: false
	}
})
const emit = defineEmits(['confrim', 'close'])
onMounted(async()=>{
	const { statusBarH, navBarH } = app.globalData.navData
	top.value = statusBarH + navBarH + 30
	const { obj } = await getGradeListApi()
	list.value = obj
})
const nextPage = (name: string, code: string) =>{
	emit('confrim', code)
}

</script>

<template>
	<view v-show="props.show" class="mask">
		<view class="top" :style="{'marginTop': top + 'px'}">
			<image @click="emit('close')" src="/static/global/close.svg" />
		</view>
		<view
			class="grad-container"
		>
			<view
				class="grad-item"
				v-for="(item, index) in list"
				:key="index"
				@click="nextPage(item.name, item.code)"
				hover-class="grad-item--on"
			>
			 {{item.name}}
			</view>
		</view>
	</view>
</template>

<style lang="scss">
.top{
	width: 100%;
	height: 60rpx;
	box-sizing: border-box;
	padding-right: 20rpx;
	text-align: right;
	image{
		width: 60rpx;
		height: 60rpx;
	}
}	
.grad-container{
  width: 732rpx;
	display: flex;
	flex-wrap: wrap;
	padding-top: 20rpx;
	border-radius: 20rpx;
	margin: 20rpx 9rpx 0 9rpx;
	background: #FFF;
	.grad-item{
	  width: 200rpx;
	  height: 80rpx;
	  text-align: center;
	  line-height: 80rpx;
	  font-size: 30rpx;
	  font-weight: 400;
	  color: #323232;
	  background: #FFF7D6;
	  border-radius: 40rpx;
		margin: 0 22rpx 41rpx 22rpx;
	  font-family: Chill Round Gothic;
	}
	.grad-item--on{
	  background-color: #FEC100;
	}		
}


</style>